<template>
  <div class="container">

    <div>
      <div v-for="(item, index) in RTSPURLList.slice(0, 4)  " :key="index">

        <YinRuVideo :rtsp="item.URL" style="width: 100%; height: 100%;" ref="videoSon">
        </YinRuVideo>

      </div>
    </div>

    <div class="amplify ">
      <el-tooltip content="点击进入视频列表" placement="top">
        <div @click="VideoList" class="el-icon-full-screen"></div>
      </el-tooltip>
    </div>


    <div v-if="isVideoList" class="VideoList">
      <div>
        <div>
          <YinRuVideo style="width: 100%; height: 100%;" class="DoubleVideoimage" :rtsp="VideoListOne" ref="videoSon">
          </YinRuVideo>
        </div>
        <div>
          <div @click="aaa" style="color:red ;font-size: 14px;text-decoration: underline;">
            点击跳转到录像
            <!-- <a href="http://10.246.3.152/doc/page/preview.asp">点击查看回放</a> -->
            <!-- <router-link to="/http://10.246.3.152/doc/page/preview.asp">打开新页面</router-link> -->
          </div>
          <div class="ClassRowName" @click.stop="UsingVideo(item, $event)" v-for="(item, index) in RTSPURLList"
            :key="index">{{ item.CameraName
            }}</div>

          <div class="QX el-icon-close" @click="minimize"></div>
        </div>
      </div>


    </div>
  </div>
</template>
<script>
import YinRuVideo from './ShiPin.vue'
export default {
  components: { YinRuVideo, },
  name: '',
  data() {
    return {
      RTSPURLList: [
        {
          id: '1',
          CameraName: '副斜井350米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.1:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'

        },
        {
          id: '2',
          CameraName: '副斜井350米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.2:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '17',
          CameraName: '主斜井350米处皮带内',
          URL: 'rtsp://admin:a123456789@10.246.3.17:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '3',
          CameraName: '副斜井450米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.3:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '4',
          CameraName: '副斜井450米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.4:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '5',
          CameraName: '副斜井550米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.5:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '6',
          CameraName: '副斜井550米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.6:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '7',
          CameraName: '副斜井650米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.7:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '8',
          CameraName: '副斜井650米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.8:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '9',
          CameraName: '副斜井750米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.9:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '10',
          CameraName: '副斜井750米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.10:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '11',
          CameraName: '副斜井900米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.11:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '12',
          CameraName: '副斜井900米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.12:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '13',
          CameraName: '主斜井180米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.13:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '14',
          CameraName: '主斜井180米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.14:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '15',
          CameraName: '主斜井380米处-1',
          URL: 'rtsp://admin:a123456789@10.246.3.15:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },
        {
          id: '16',
          CameraName: '主斜井380米处-2',
          URL: 'rtsp://admin:a123456789@10.246.3.16:554/ch1/h264/main/av_stream/pixel-to-pixel_thermometry_data'
        },


      ],
      isRTSPURL: false,
      isVideoList: false,
      handleDoubleClickItem: '',
      VideoListOne: '',
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.DefaultVideo()
    });


  },
  methods: {
    aaa() {
      window.open('http://10.246.3.152/doc/page/preview.asp');
    },
    minimize() {
      this.isVideoList = false
    },

    VideoList() {
      if (this.RTSPURLList.length > 0) {
        this.isVideoList = true
      } else {
        this.$message({
          message: '暂无视频查看',
          type: 'success'
        });
      }
    },
    UsingVideo(VideoItem, el) {
      this.isRTSPURL = this.isRTSPURL = true
      const elements = document.getElementsByClassName("ClassRowName");
      [...elements].forEach(element => {
        element.style.backgroundColor = '';
      });
      this.VideoListOne = VideoItem.URL
      const clickedElement = el.target;
      clickedElement.style.backgroundColor = 'red'
    },
    DefaultVideo() {
      this.VideoListOne = this.RTSPURLList[0].URL
    },

  },
}
</script>
<style lang="less" scoped>
@image: '../../assets/SHIPIN.png';
@DoubleVideoimage: '../../assets/DoubleVideo.png';

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.messageBox {
  z-index: 9999 !important;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;

  >div:nth-child(1) {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;

    >div {
      width: 20%;
      height: 70%;
      padding: 10px;
      margin: 0 24px;
      background-image: url('@{image}');
      background-size: 100% 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

  }

  >div:nth-child(2) {
    // width: 40px;
    // height: 40px;
    position: absolute;
    top: 5px;
    right: 10px;
    color: rgb(102,
        147,
        215);
    z-index: 9999;
  }




  .VideoList {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-image: none;



    >div {
      width: 80vw;
      height: 80vh;
      display: flex;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);


      >div:nth-child(1) {
        width: 80%;
        height: 100%;
        border: 25px solid rgb(46,
            46,
            54);
        // border: 1px solid red;
        background-color: black;

      }

      >div:nth-child(2) {
        width: 20%;
        height: 100%;
        // border: 1px solid red;
        // background-color: white;
        border-right: 25px solid rgb(46,
            46,
            54);
        border-top: 25px solid rgb(46,
            46,
            54);
        border-bottom: 25px solid rgb(46,
            46,
            54);

        // border-left: 3px solid black;
        background-color: rgb(38,
            38,
            43);

        >div {
          padding: 5px 10px;
          color: wheat;

        }
      }
    }
  }
}

.QX {
  width: 20px;
  height: 20px;
  // border: 1px solid red;
  position: absolute;
  top: -1px;
  right: 10px;
  z-index: 9999;
  color: white;
}
</style>
